<script setup>
import {onMounted, reactive, ref} from 'vue';
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import server from "../../config/server.js";
import storage from "../../util/storage.js";
import {message} from "ant-design-vue";

const expand = ref(false);
const router = useRouter()
const formRef = ref();
const formState = ref({});
const userId = ref()
const user = ref()
const userDetail = ref()
const route = useRoute()

const onFinish = values => {
  console.log('Received values of form: ', values);
  console.log('formState: ', formState.value);
  axios({
    method: "put",
    url: `${server.apiBaseUrl}/zdppy_amuserdetail/${formState.value.id}`,
    data: formState.value
  }).then(resp => {
    console.log("update", resp.data)
    router.push({path: "/user/detail", query: {id: userId.value}});
    message.success("修改用户详情成功")
  })
};

const getUserDetail = () => {
  axios({
    method: "get",
    url: `${server.apiBaseUrl}/zdppy_amuserdetail?user_id=${userId.value}`
  }).then(resp => {
    console.log(resp.data.data.results)
    const data = resp.data.data.results
    if (data.length > 0) {
      userDetail.value = data[0]
      console.log("userDetail.value ", userDetail.value)
      formState.value = data[0]
    }
  })
}

onMounted(() => {
  console.log(route.query)
  userId.value = route.query.id
  console.log("userId", userId.value)
  getUserDetail()
  user.value = storage.get("user")
})
</script>

<template>
  <div>
    <a-form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="formState"
        @finish="onFinish"
    >
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
              name="name"
              label="name"
          >
            <a-input v-model:value="formState.name"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
              name="cid"
              label="cid"
          >
            <a-input v-model:value="formState.cid"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
              name="ename"
              label="ename"
          >
            <a-input v-model:value="formState.ename"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
              name="phone"
              label="phone"
          >
            <a-input v-model:value="formState.phone"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
              name="email"
              label="email"
          >
            <a-input v-model:value="formState.email"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
              name="department"
              label="department"
          >
            <a-input v-model:value="formState.department"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
              name="job"
              label="job"
          >
            <a-input v-model:value="formState.job"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
              name="salary"
              label="salary"
          >
            <a-input-number v-model:value="formState.salary"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
              name="age"
              label="age"
          >
            <a-input-number v-model:value="formState.age"/>
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item
              name="gender"
              label="gender"
          >
            <a-input v-model:value="formState.gender"/>
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item
              name="address"
              label="address"
          >
            <a-input v-model:value="formState.address"/>
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item
              name="height"
              label="height"
          >
            <a-input-number v-model:value="formState.height"/>
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item
              name="weight"
              label="weight"
          >
            <a-input-number v-model:value="formState.weight"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: right">
          <a-button type="primary" html-type="submit">确认修改</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>